<template>
  <div>
    <el-button @click="showForm">添加一级分类</el-button>
    <el-row :gutter="20">
      <el-col :span="12"
        ><div class="grid-content bg-purple">
          <el-tree :data="categoryAll">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button type="text" size="mini" @click="() => edit(node, data)">
                  编辑
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => appendChildren(data)"
                  v-if="!data.parent_id"
                >
                  追加二级分类
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => deleteCategory(data)"
                >
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </div></el-col
      >
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="一级分类名称" prop="categoryName">
              <el-input v-model="form.firstCategoryName" :disabled="form.firstCategoryDisable"></el-input>
            </el-form-item>
            <el-form-item
              label="二级分类名称"
            >
              <el-input v-model="form.secondCategoryName" :disabled="form.secondCategoryDisable"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sumbit"
                >立即创建</el-button
              >
            </el-form-item>
          </el-form>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import { addFirstCategory, addSecondCategory, editCategory, deleteCategory } from "../../api/info";

export default {
  data() {
    return {
      form: {
        id: "",
        firstCategoryName: "",
        firstCategoryDisable: false,
        secondCategoryName: "",
        secondCategoryDisable: true,
      },
      rules: {
        categoryName: [
          { required: true, message: "分类名称", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    categoryAll(){
      return this.$store.getters.categoryAll;
    }
  },
  methods: {
    appendChildren(data) {
      this.form.id = data.id;
      this.form.firstCategoryDisable = true;
      this.form.firstCategoryName = data.category_name;
      this.form.secondCategoryDisable = false;
      this.form.secondCategoryName = "";
      this.form.module = "createSecond";
    },
    edit(node, data){
      this.form.id = data.id;
      if (!node.isLeaf){
        this.form.firstCategoryName = data.category_name;
        this.form.secondCategoryDisable = true;
      }else {
        this.form.firstCategoryDisable = true;
        this.form.firstCategoryName = node.parent.data.category_name;
        this.form.secondCategoryDisable = false;
        this.form.secondCategoryName = data.category_name;
      }
      this.form.module = "edit";
    },
    showForm() {
      this.form.firstCategoryDisable = false;
      this.form.firstCategoryName = "";
      this.form.secondCategoryDisable = true;
      this.form.secondCategoryName = "";
      this.form.module = "createFirst";
    },
    sumbit() {
      if (this.form.module == "createFirst") {
        this.addFirstCategory();
      } else if (this.form.module == "createSecond"){
        this.addSecondCategory();
      } else if (this.form.module == "edit") {
        this.editCategory();
      }
    },
    editCategory() {
      let param = {
        id: this.form.id,
        categoryName: this.form.secondCategoryDisable
          ? this.form.firstCategoryName
          : this.form.secondCategoryName
      };
      editCategory(param).then(res => {
        this.$message.success(
          `编辑 id为 ${this.form.id} 分类成功，编辑后为 ${res.data.data.categoryName} `
        );
        this.getCategoryAll();
        this.$refs.form.resetFields();
      });
    },
    deleteCategory(data) {
      let param = { categoryId: data.id };
      deleteCategory(param).then(() => {
        this.$message.success(`删除 id为 ${data.id} 分类成功`);
        this.getCategoryAll();
      });
    },
    addFirstCategory() {
      let param = { categoryName: this.form.firstCategoryName };
      addFirstCategory(param).then(res => {
        this.$message.success(
          `添加 ${res.data.category_name} 一级分类成功，id为 ${res.data.id}`
        );
        this.getCategoryAll();
        this.$refs.form.resetFields();
      });
    },
    addSecondCategory() {
      let param = {
        categoryName: this.form.secondCategoryName,
        parentId: this.form.id
      };
      addSecondCategory(param).then(res => {
        this.$message.success(
                `添加 ${res.data.category_name} 二级分类成功`
        );
        this.getCategoryAll();
        this.$refs.form.resetFields();
      });
    },
    getCategoryAll(){
      this.$store.dispatch("getCategoryAll");
    }
  },
  mounted() {
    this.getCategoryAll();
  }
};
</script>

<style scoped></style>
